import React, { useState, type ReactNode } from 'react'
import { Button, Drawer } from 'antd'
import { Html5Filled } from '@ant-design/icons'

export const CodeDrawer: React.FC<{ content: ReactNode }> = ({ content }) => {
  const [open, setOpen] = useState(false)
  const showDrawer = () => {
    setOpen(true)
  }

  const onClose = () => {
    setOpen(false)
  }
  return (
    <>
      <Button
        className="!text-black !h-[100px] !w-[100px] !border-2 !border-gray-300 !shadow-none !bg-transparent"
        type="primary"
        onClick={showDrawer}
        icon={<Html5Filled />}
        size="large"
      >
        Code
      </Button>
      <Drawer width={800} placement="right" onClose={onClose} open={open}>
        {content}
      </Drawer>
    </>
  )
}
